<template>
    <div class="container" v-loading="isLoading">
        <!-- <el-page-header class="list-head" @back="goBack" content="历史数据"></el-page-header> -->
        <div class="real-name">
            <el-form :inline="true" :model="historyFormInline" ref="historyFormInline" class="demo-form-inline" label-width="120px">
                <el-form-item label="车牌搜索" prop="car_no">
                    <el-input v-model="historyFormInline.car_no" placeholder="请输入车牌号"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" prop="startTime">
                    <el-date-picker v-model="historyFormInline.startTime" type="date"
                        :picker-options="pickerStartTimeOptions" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime">
                    <el-date-picker v-model="historyFormInline.endTime" type="date" :picker-options="pickerEndTimeOptions"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="道闸点" prop="door_no">
                    <el-select v-model="historyFormInline.door_no" placeholder="请选择">
                    <el-option label="全部" value=""></el-option>
                    <el-option :label="item" :value="$index" v-for="(item, $index) in AccessControlList" :key="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="单位类型" prop="company_type">
                    <el-select v-model="historyFormInline.company_type" placeholder="请选择单位类型">
                        <el-option label="全部" :value="''"></el-option>
                        <el-option
                            :label="item.name"
                            :value="item.id"
                            v-for="item in companyTypeList"
                            :key="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="单位/班组/工种" prop="companyMap">
                    <el-cascader
                      v-model="historyFormInline.companyMap"
                      :options="companyMap"
                      :props="{ checkStrictly: true }"
                      clearable>
                    </el-cascader>
                </el-form-item>
                <el-form-item label="类型" prop="in_or_out">
                    <el-select v-model="historyFormInline.in_or_out" placeholder="请选择">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="出" :value="0"></el-option>
                    <el-option label="入" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item >
                  <div class="set-btns">
                      <el-button @click="historySearch" :disabled="isLoading" type="primary">查询</el-button
                      ><el-button @click="historyReset">重置</el-button>
                  </div>
                </el-form-item>
            </el-form>
        </div>
        <div class="set-btns-right" >
            <span class="export-tips">（默认导出近一个月的数据，若需导出其他，请选择日期范围）</span
            ><el-button @click="exportBtn" icon="el-icon-top-right" type="primary">导出</el-button>
        </div>
        <el-table :data="historyTable" border style="width: 100%">
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="time" label="发生时间" width="180"></el-table-column>
            <el-table-column label="姓名">
                <template slot-scope="scope">
                    <div>{{scope.row.name ? scope.row.name: '/'}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="car_no" label="车牌号码" width="180"></el-table-column>
            <el-table-column
                label="单位类型"
                width="120">
                <template slot-scope="scope">
                    <div>{{scope.row.company_type_name?scope.row.company_type_name:'/'}}</div>
                </template>
            </el-table-column>
            <el-table-column
                label="单位名称">
                <template slot-scope="scope">
                    <div>{{scope.row.company_name?scope.row.company_name:'/'}}</div>
                </template>
            </el-table-column>
            <el-table-column
                label="身份"
                width="120">
                <template slot-scope="scope">
                    <div v-if="scope.row.identity!=null">
                        <div v-if="scope.row.identity == item.id" v-for="item in identityList" :key="item.id">{{item.name}}</div>
                    </div>
                    <div v-else>/</div>
                </template>
            </el-table-column>
            <el-table-column label="班组" width="120">
                <template slot-scope="scope">
                  <div>{{scope.row.team_name?scope.row.team_name:'/'}}</div>
                </template>
            </el-table-column>
            <el-table-column label="工种" width="120">
                <template slot-scope="scope">
                  <div>{{scope.row.work_type_name?scope.row.work_type_name:'/'}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="in_or_out" label="类型" width="60"></el-table-column>
            <el-table-column label="道闸点" width="100">
                <template slot-scope="scope">
                    <div>{{AccessControlList[scope.row.door_no]}}</div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="admin-page"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="historyPage"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="20"
            layout="sizes, prev, pager, next, jumper"
            :total="historyCount">
        </el-pagination>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                isLoading: false,
                historyFormInline: {
                    car_no: '',
                    startTime: '',
                    endTime: '',
                    door_no: '',
                    in_or_out: '',
                    company_type: '',
                    companyMap: []
                },
                pagesize: 20,
                historyPage: 1,
                historyCount: 0,
                pickerStartTimeOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                pickerEndTimeOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                companyTypeList: [],
                companyMap: [],
                historyTable: [],
                AccessControlList: {
                    "1": "1号门",
                    "2": "2号门",
                    "3": "3号门",
                    "4": "4号门"
                },
                is_superuser: false,
                permission_map: {}
            }
        },
        created() {
            this.pagesize = this.pageSize;
            if(localStorage.getItem('user_info')) {
                this.permission_map = JSON.parse(localStorage.getItem('user_info')).permission_map;
                this.is_superuser = JSON.parse(localStorage.getItem('user_info')).is_superuser;
            }
            // this.isLoading  = true;
            // let company_type = this.$http.get('api/v1/user/company_type/').then((res)=>{
            //     this.companyTypeList = res.data;
            // }).catch(()=>{})
            // // 单位名称
            // let company_map = this.$http.get("/api/v1/user/company_map").then((res) => {
            //     this.companyMap = res.data;
            // }).catch(() => {})
            // let historyList= this.requestInfo(1);
            // this.$http.requestAll([company_type, company_map, historyList])
            // .then(()=>{
            //     this.isLoading = false;
            // }).catch(()=>{
            //     this.isLoading = false;
            // })
        },
        watch: {
            'historyFormInline.startTime': function () {
                let _that = this;
                this.pickerEndTimeOptions = {
                    disabledDate(time) {
                        if (_that.historyFormInline.startTime) return time.getTime() > Date.now() || time.getTime() < _that.historyFormInline.startTime.getTime();
                        else return time.getTime() > Date.now();
                    }
                }
            },
            'historyFormInline.endTime': function () {
                let _that = this;
                this.pickerStartTimeOptions = {
                    disabledDate(time) {
                        if (_that.historyFormInline.endTime) return time.getTime() > Date.now() || time.getTime() > _that.historyFormInline.endTime.getTime();
                        else return time.getTime() > Date.now();
                    }
                }
            }
        },
        methods: {
            requestInfo(val) {
                this.historyPage = val;
                let start_time='';
                let end_time='';
                if (this.historyFormInline.startTime && this.historyFormInline.endTime) {
                    start_time = this.common.formatTimestamp_min(Date.parse(this.historyFormInline.startTime) / 1000);
                    end_time = this.common.formatTimestamp_min(Date.parse(this.historyFormInline.endTime) / 1000 + 86399);
                }
                let historyList= this.$http.get(`api/v1/security/car_record/?page=${this.historyPage}&page_size=${this.pagesize}&car_no=${this.historyFormInline.car_no}&door_no=${this.historyFormInline.door_no}&company_type=${this.historyFormInline.company_type}&company=${this.historyFormInline.companyMap[0]?this.historyFormInline.companyMap[0]:''}&team=${this.historyFormInline.companyMap[1]?this.historyFormInline.companyMap[1]:''}&work_type=${this.historyFormInline.companyMap[2]?this.historyFormInline.companyMap[2]:''}&in_or_out=${this.historyFormInline.in_or_out}&start_time=${start_time}&end_time=${end_time}`)
                .then((res) => {
                    this.historyTable = res.data;
                    this.historyCount = res.count;
                    this.isLoading = false;
                }).catch(() => {
                    this.isLoading = false;

                })
            },
            historySearch() {
                if ((!this.historyFormInline.startTime && this.historyFormInlinehistoryFormInline.endTime) || (this.historyFormInlinehistoryFormInline.startTime && !this.historyFormInlinehistoryFormInline.endTime)) {
                    return this.$message.warning('请选择完整时间段');
                }
                this.isLoading = true;
                this.requestInfo(1);
            },
            historyReset() {
                this.historyFormInline.companyMap = [];
                this.$refs.historyFormInline.resetFields();
                this.requestInfo(1);
            },
            handleCurrentChange(val) {
                this.$store.commit('timeStamp', Date.parse(new Date()));
                this.requestInfo(val);
            },
            handleSizeChange(val) {
                this.pagesize = val;
                this.$store.commit('timeStamp', Date.parse(new Date()));
                this.requestInfo(1);
            },
            // 返回上一页
            goBack() {
                this.$router.go(-1);
            },
            // 导出
            exportBtn() {
                let start_time='';
                let end_time='';
                if ((!this.historyFormInline.startTime && this.historyFormInlinehistoryFormInline.endTime) || (this.historyFormInlinehistoryFormInline.startTime && !this.historyFormInlinehistoryFormInline.endTime)) {
                    return this.$message.warning('请选择完整时间段');
                }
                if (this.historyFormInline.startTime && this.historyFormInline.endTime) {
                    start_time = this.common.formatTimestamp_min(Date.parse(this.historyFormInline.startTime) / 1000);
                    end_time = this.common.formatTimestamp_min(Date.parse(this.historyFormInline.endTime) / 1000 + 86399);
                }
                this.isLoading = true;
                this.$http.downloadGet(`api/v1/security/car_record/?export=1&car_no=${this.historyFormInline.car_no}&door_no=${this.historyFormInline.door_no}&company_type=${this.historyFormInline.company_type}&company=${this.historyFormInline.companyMap[0]?this.historyFormInline.companyMap[0]:''}&team=${this.historyFormInline.companyMap[1]?this.historyFormInline.companyMap[1]:''}&work_type=${this.historyFormInline.companyMap[2]?this.historyFormInline.companyMap[2]:''}&in_or_out=${this.historyFormInline.in_or_out}&start_time=${start_time}&end_time=${end_time}`, {}, 'application/vnd.ms-excel', '车辆道闸.xls').then((res) => {
                    this.isLoading = false;
                })
                .catch(() => {
                    this.isLoading = false;
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .container {
        .real-name {
            ::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
                width: 180px;
            }
            ::v-deep .el-input input {
                width: 180px;
            }
            .set-btns{
              margin-left: 60px;
            }
        }
        .set-btns-right{
          align-self: flex-end;
          margin-bottom:10px;
        }
        .admin-page{
          margin-top:10px;
          align-self:center;
        }
    }
</style>
